@charset "UTF-8";

/* Intro */
.intro-title {margin-bottom: 30px;}
.intro-title .title {font-size: 35px; line-height: 40px; letter-spacing: -0.5px; color: #000; margin-bottom: 10px;}
.intro-title .info {font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #000;}

.intro-bg {position: relative;}
.intro-bg::before {content: ""; position: absolute; width: 100%; height: 10px; left: 0; top: -10px; background: url("../images/repeat_bg.png"); z-index: 3;}
.intro-bg::after {content: ""; position: absolute; width: 100%; height: 10px; left: 0; bottom: -10px; background: url("../images/repeat_bg.png"); z-index: 3;}

.intro-bx {position: relative;}
.intro-bx::before {content: ""; position: absolute; width: 10px; height: 100%; left: 0; top: 0; background: url("../images/repeat_bg.png"); z-index: 3;}
.intro-bx::after {content: ""; position: absolute; width: 10px; height: 100%; right: 0; top: 0; background: url("../images/repeat_bg.png"); z-index: 3;}
.intro-bx-wrap {background: rgba(255, 255, 255, 0.7); margin: 10px; overflow: hidden;}

.intro-bx .introbx-inner {position: relative; float: left; width: 50%; text-align: center; padding: 60px 0;}
.intro-bx .one .introbx-inner {width: 100%;}
.intro-bx .introbx-inner::after {display: none; content: ""; position: absolute; width: 1px; height: calc(100% - 80px); right: 0; top: 40px; background: #C9C9C9;}
.intro-bx .introbx-inner:first-child:after {display: block;}
.intro-bx .one .introbx-inner:first-child:after {display: none;}
.intro-bx .introbx-inner strong {display: block; margin-bottom: 10px; font-family: 'Dream Bold'; font-size: 26px; color: #111;}
.intro-bx .introbx-inner .m-blank {display: block;}
.intro-bx .introbx-inner p {font-size: 18px; line-height: 26px; letter-spacing: -0.5px; color: #000000; margin: 15px 0 20px;}
.intro-bx .introbx-inner a {position: relative; display: inline-block; width: 100%; max-width: 180px; margin-top: 30px; margin-left: 5px; margin-right: 5px; padding: 10px 20px; border-radius: 5px; font-family: 'Dream Regular'; font-size: 16px; text-align: left; color: #fff;}
.intro-bx .introbx-inner a.color1 {background: #00a0e9;}
.intro-bx .introbx-inner a.color1:hover {background: #0179b1;}
.intro-bx .introbx-inner a.color2 {background: #004098;}
.intro-bx .introbx-inner a.color2:hover {background: #001c44;}
.intro-bx .introbx-inner a::after {content: ''; position: absolute; right: 18px; top: 20px; display: inline-block; width: 9px; height: 14px; background: url('../images/arrow-intro.png') no-repeat; vertical-align: middle;}

@media all and (max-width: 830px){
  .intro-content {background: none;}
  .intro-bx .introbx-inner {float: none; width: 100%; padding: 40px 0;}
  .intro-bx .introbx-inner::after {display: none;}
  .intro-bx .introbx-inner:first-child::after {display: block; width: calc(100% - 80px); left: 40px; top: auto; bottom: 0; height: 1px;}
}

/* Table */
.func-table {position: relative; line-height: 1.6;}
.func-table:after {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #fff;}
.func-table table {position: relative;}
.func-table table:after {content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 2px; background: #111}
.func-table table:before {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #FFF;}
.func-table thead th {padding: 13px 10px; background: #f7f8f9; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-family: 'Dream Regular'; font-size: 18px; font-family: 'Dream Regular'; font-weight: 400; color: #111;}
.func-table tbody {display: table-header-group;}
.func-table tbody::after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #8b9099;}
.func-table tbody th {padding-left: 20px; background:#fbfbfb; border-right: 1px solid #dddee0; border-bottom: 1px solid #ccd0d7; font-family: 'Dream Medium'; font-size: 18px; font-weight: 400; text-align: left; color: #111;}
.func-table tbody td {height: 60px; padding: 17px 20px; background:#fff; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-family: 'Dream Light'; font-size: 16px; text-align: left; color: #666;}
.func-table tbody td a {color: #333;}
.func-table .list > li {position: relative; padding-left: 20px;}
.func-table .list > li:after {content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: #b4c1dd; border-radius: 100%;}
.func-table .no-data {padding: 50px 0; text-align: center;}
.func-table .download {position: relative;}
.func-table .download::before {content: ''; display: inline-block; position: relative; top: -2px;  width: 19px; height: 19px; margin-right: 7px; background: url('../images/ico-down.png') no-repeat; vertical-align: middle;}
.func-table .download span {position: relative;}
.func-table .download span::after {content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: #d1d1d1; transition: 1s;}
.func-table .download:hover span::after {width: 100%;}
.func-table .align-l {text-align: left;}
.func-table .align-c {text-align: center;}
.func-table .align-r {text-align: right;}
.func-table strong {font-family: 'Dream Regular'; color: #000;}
.func-table input[type="text"] {height: 40px; padding: 0 10px; line-height: 40px;}
.func-table select {height: 40px; padding: 0 5px; line-height: 40px;}
.func-table input,
.func-table select,
.func-table textarea {font-family: 'Dream Light'; font-size: 16px;}
.func-table .must {display: inline-block; margin-left: 5px; color: #e70000;}
.func-table .btn {display: inline-block; height: 40px; padding: 0 15px; font-size: 14px; line-height: 35px; color: #fff; cursor: pointer; transition: .4s;}
.func-table .btn.color1 {background: #ebebeb; border: 1px solid #ccc; color: #111 !important;}
.func-table .btn.color1:hover {background: #cacaca;}
.func-table .btn.color2 {background: #777; border: 1px solid #777;}
.func-table .btn.color2:hover {background: #555;}
.func-table .btn.color3 {background: #111; border: 1px solid #111;}
.func-table .btn.color3:hover {background: #000;}

@media all and (max-width:960px) {
  .func-table {overflow-x: auto;}
  .func-table::-webkit-scrollbar {height: 7px;}
  .func-table::-webkit-scrollbar-thumb {background-color: rgba(0,64,152,.8);border-radius: 0px;}
  .func-table::-webkit-scrollbar-track {background-color: #ccc;border-radius: 0px;}
  .func-table table {width: 1300px;}
  .func-table:after {display: none; content: ''; position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; background: rgba(60,81,82,0.4) url('../images/img_mobile_text.png') no-repeat center 40px;}
  .func-table.on:after {display: none;}
  .func-table thead th,
  .func-table tbody th,
  .func-table tbody td {padding: 10px 8px; font-size: 16px;}
}
/* Heading */
.objHeading_h2 {position: relative; display: block; margin-top: 31px; font-family: 'Dream Medium'; font-size: 26px; letter-spacing: -0.5px; line-height :1.5; color: #111; }
.objHeading_h3 {position: relative; display: inline-block; margin-top: 26px; margin-bottom: 5px; font-family:'Dream Medium'; font-size:22px; letter-spacing: -0.5px; line-height: 1.5; color: #0068b7;}
.objHeading_h3::before {content: ''; position: absolute; left: 100%; top: -7px; width: 8px; height: 8px; background: #0068b7; border-radius: 100%;}
.objHeading_h4 {position: relative; display: block; margin-top: 42px; font-family:'Dream Medium'; line-height: 1.5; font-size: 20px; letter-spacing: -0.5px; color: #336185;}
.objHeading_h4::before {content: ''; position: absolute; left: 0; top: -7px; width: 20px; height: 2px; background: #046478; }
.objHeading_h5 {position: relative; display: block; margin-top: 30px; font-family: 'Dream Medium'; font-size: 18px; line-height: 1.5; letter-spacing: -0.5px; color: #08b2b1;}

.objHeading_h1.no-margin,
.objHeading_h2.no-margin,
.objHeading_h3.no-margin,
.objHeading_h4.no-margin,
.objHeading_h5.no-margin {margin-top: 0;}

/* Tab */
.tab_div .ul_4 {overflow: hidden; position: relative; margin-bottom: 40px; border-top: 2px solid #0068b7; border-left: 1px solid #ccc;}
.tab_div .ul_4 > li {position: relative; float: left; width: 50% !important; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.tab_div .ul_4 > li::after {content: ''; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); background: #0068b7; box-sizing: border-box; opacity: 0; transition: opacity 0.5s;}
.tab_div .ul_4 > li > a {position: relative; z-index: 3; display: block; padding: 15px 20px 16px 20px; font-family: 'Dream Light'; font-size: 18px; letter-spacing: -0.5px; text-align: center; color: #666;}
.tab_div .ul_4 > li > a[target=_blank]::after {content: ''; position: relative; top: 2px; display: inline-block; width: 16px; height: 16px; margin: 0 0 0 5px; background:  url('../images/tab-link-blank.png') no-repeat 93% center; }

.tab_div .ul_4 > li._active > a,
.tab_div .ul_4 > li:hover > a {font-family: 'Dream Medium'; color: #fff;}
.tab_div .ul_4 > li:hover::before {opacity: 0;}
.tab_div .ul_4 > li:hover + li::before {opacity: 0;}
.tab_div .ul_4 > li._active::after,
.tab_div .ul_4 > li:hover::after {opacity: 1;}
.tab_div .ul_4 > li._active > a::before,
.tab_div .ul_4 > li:hover > a::before {background: #89cdd9 url('../../images/guide/more_arrow_1_white.png') no-repeat 58% center; border-color: #89cdd9;}
.tab_div .ul_4 > li._active > a[target=_blank]::after ,
.tab_div .ul_4 > li:hover > a[target=_blank]::after {background: url('../../images/guide/tab-link-blank-ov-white.png');}

@media all and (max-width:1000px) {
  #subContent .tab_div .ul_4 > li {width: 50% !important;}
}

@media all and (max-width:860px) {
    .tab_div {position: relative;}
    .tab_div .ul_4 {overflow: visible !important; position: static !important; max-height: 1000px !important; top: 60px; z-index: -1; width: 100%; max-height: 0; margin-bottom: 30px; border: 1px solid #fff; border-top: 2px solid #0068b7 !important; transition: all 0.5s ease;}
    .tab_div ul.on {z-index: 10; max-height: 600px; border-left: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; border-top: 1px solid #d1d1d1;}
    #subContent .tab_div .ul_4 > li {display: block; width: 100% !important; padding: 0; border: 0}
    .tab_div ul li a {display: block; height: auto; padding: 13px 40px; background: #fff; border-bottom: 1px solid #d1d1d1; font-size: 16px; text-align: left; line-height: normal;}
    .tab_div ul li a:hover {border-bottom: 1px solid #0146b9;}
    .tab_div ul li a:after {display: none;}
    .tab_div ul li a[target=_blank]  {background-position: 97% center !important;}
    .tab_div ul li a span {display: block; padding: 0 20px;}
    .tab_div ul li a span:before {bottom: -11px;}
    .tab_div ul li:after {display: none;}
    .tab_div .mobile-tab {display: none !important; position: relative; display: block; width: 100%; margin-bottom: 40px; padding: 14px 40px; background: #0146b9 url('../images/arrow-sel.png') no-repeat 97% center; text-align: center; font-family: 'Dream Medium'; font-size: 16px; color: #fff;}
    .tab_div .mobile-tab.on {background: #002d78 url('../images/arrow-sel-rever.png') no-repeat 97% center;}
    .tab_div .mobile-tab.on::after {background: url('../images/dot-sel-rever.png') no-repeat center center;}

    .tab_div .ul_4 > li {margin: 0; border: 0;}
    .tab_div .ul_4 > li > a {padding: 13px 20px; font-size: 16px; text-align: left;}
    .tab_div .ul_4 > li > a::before {height: 0;}
    .tab_div .ul_4 > li._active > a {color: #0068b7;}
}

/* Number Banner */
.number-banner {padding: 35px 40px 40px 40px; background: #f7f8f9;}
.number-banner .title {margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #ccc; font-family: 'Dream Medium'; font-size: 22px; color: #111;}
.number-banner .list li {overflow: hidden; margin-bottom: 20px;}
.number-banner .list li:last-child {margin-bottom: 0;}
.number-banner .list .num {float: left; width: 32px; height: 32px; background: #0068b7; text-align: center; vertical-align: middle; font-family: 'Dream Regular'; font-size: 16px; line-height: 30px; color: #fff;}
.number-banner .list .text {float: left;width: calc(100% - 32px);padding-top: 3px;padding-left: 15px;vertical-align: middle;font-family: 'Dream Light';font-size: 16px;color: #666;}
.number-banner.multi .title {margin-bottom: 0;padding-bottom: 0;border: 0;}

@media all and (max-width: 768px) {
  .number-banner {padding: 25px;}
}

/* Agree*/
.box-agree {text-align: right;}

@media all and (max-width: 600px) {
  .box-agree {text-align: left;}
}

/* Paging */
._paging {padding: 60px 0 0 0;}
._paging > ._inner > ul {margin: 0 13px;}
._paging > ._inner > ul li strong {width: 35px; height: 35px; line-height:32px; border-radius: 100%; background-color: #99a2b2; border-color: #99a2b2;}
._paging > ._inner > a {width: 35px; height: 35px; line-height:35px; background-image: url('../images/arrow-page.png') !important; background-repeat: no-repeat; background-color: transparent; border: 0;}
._paging > ._inner > a._first {background-position: 0 0;}
._paging > ._inner > a._last {background-position: 0 -175px;}
._paging > ._inner > a._listNext, ._paging ._inner a._listPrev {display: block;}
._paging > ._inner > a._listNext {background-position: 0 -140px;}
._paging > ._inner > a._next {background-position: 0 -105px;}
._paging > ._inner > a._listPrev {background-position: 0 -35px;}
._paging > ._inner > a._prev {background-position: 0 -70px;}
._paging ._inner a, ._paging ._inner strong {border: 0; line-height: 33px;}

@media all and (max-width: 900px) {
    ._paging {padding: 60px 0 30px 0;}
}
@media all and (max-width: 750px) {
    ._paging {padding:  40px 0 20px 0;}
    ._paging > ._inner > ul {display: none;}
    ._paging ._inner ._pageState {display: block;}
}

/* Button */
.btn-submit {margin-top: 30px; text-align: center;}
.btn-submit input,
.btn-submit button,
.btn-submit a {display: inline-block; height: 50px; margin: 0 5px; padding: 0 25px; font-size: 16px; line-height: 45px; color: #fff; cursor: pointer; transition: .4s;}
.btn-submit .color1 {background: #00a0e9; border: 1px solid #00a0e9;}
.btn-submit .color1:hover {background: #0088c7; border: 1px solid #0088c7;}
.btn-submit .color2 {background: #777; border: 1px solid #777;}
.btn-submit .color2:hover {background: #555; border: 1px solid #555;}